<script setup lang="ts">
import { onMounted, ref, PropType } from 'vue';
import * as ECharts from 'echarts';
import { ElCard } from 'element-plus';

interface PieChartData {
  labels: string[]; // 分类标签
  values: number[]; // 对应数值
}

interface ChartData {
  title: string;
  series: PieChartData;
}

const props = defineProps({
  data: {
    type: Object as PropType<ChartData>,
    required: true
  }
});

const chartRef = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (chartRef.value) {
    const myChart = ECharts.init(chartRef.value);

    const option = {
      title: { text: props.data.title },
      tooltip: {},
      legend: { data: props.data.series.labels },
      series: [
        {
          name: '消费构成',
          type: 'pie',
          radius: '55%',
          data: props.data.series.values.map((val, idx) => ({
            value: val,
            name: props.data.series.labels[idx]
          })),
          emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
        }
      ]
    };

    myChart.setOption(option);
  }
});
</script>

<template>
  <el-card class="pie-chart-card">
    <div ref="chartRef" class="chart-container"></div>
  </el-card>
</template>

<style scoped>
.pie-chart-card {
  padding: 0;
  height: 100%;
  width: 40%;
}

.chart-container {
  width: 500px;
  height: 400px;
}
</style>
